<template>
    <div class="message-wrapper">
      <el-tabs v-model="activeName" @tab-click="handleClick" class="table">
        <el-tab-pane name="first">
          <span slot="label">
            {{$t('message.allMessage')}}
            <span class="badge">21</span>
          </span>
          <div class="btn-wrapper">
            <el-button type="danger" icon="el-icon-delete" circle @click="delectOne"></el-button>
            <el-button type="success" icon="el-icon-check" circle @click="doneOne"></el-button>
          </div>
          <el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="日期" width="200">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column label="消息标题" show-overflow-tooltip>
              <template slot-scope="scope">
                <router-link :to="{path:'/message/detail',query: {id: scope.row.id}}">
                  {{ scope.row.title }}
                </router-link>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination @current-change="handleCurrentChange" :page-size="100" layout="prev, pager, next, jumper" :total="1000"></el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="$t('message.unreadMessage')" name="second">配置管理</el-tab-pane>
      </el-tabs>
    </div>
</template>

<script>
    export default {
      name: "message",
      data() {
        return {
          activeName: 'first',
          tableData3: [{
            date: '2016-05-03 09:33:30',
            title: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路'
          }, {
            date: '2016-05-02 09:33:30',
            title: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04 09:33:30',
            title: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01 09:33:30',
            title: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-08 09:33:30',
            title: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-06 09:33:30',
            title: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-07 09:33:30',
            title: '上海市普陀区金沙江路 1518 弄'
          }],
          selection: [],
        }
      },
      methods: {
        handleClick(tab, event) {
          console.log(tab, event);
        },
        handleSelectionChange(val) {
          this.selection = val;
        },
        delectOne(){
          if(this.selection.length <= 0){
            this.$message.error('请至少选择一条数据');
          }else{

          }
        },
        doneOne(){
          if(this.selection.length <= 0){
            this.$message.error('请至少选择一条数据');
          }else{

          }
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        }
      }
    }
</script>

<style scoped rel="stylesheet/scss" lang="scss">
  .message-wrapper{
    min-height: calc(100vh - 84px);
    background: #f0f2f5;
    padding: 20px;
    .table{
      padding: 20px;
      background: #fff;
      .el-tabs__item.is-active{
        color: #000;
      }
      .btn-wrapper{
        padding-top: 12px;
        text-align: right;
        .el-button.is-circle{
          padding: 8px;
        }
      }
      .badge{
        background: #F56C6C;
        padding: 2px 4px;
        color: #fff;
        border-radius: 4px;
        font-size: 10px;
      }
      .pagination{
        padding-top: 20px;
        text-align: right;
      }
    }
  }
</style>
